import React from 'react';
import { inject, observer } from 'mobx-react';
import { Button, Checkbox } from 'antd';
import { WeaAlertPage, WeaLocaleProvider } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;
@inject('loginStore')
@observer
export default class LoginComponent extends React.Component {
  constructor(props) {
    super(props);
    this.onWindowResize = this.onWindowResize.bind(this);
    this.onLogin = this.onLogin.bind(this);
    jQuery(window).resize(() => this.onWindowResize());
  }

  componentWillMount() {
    const { location, loginStore } = this.props;
    // loginStore.checkInfo();
    loginStore.getUpgradeInfo(location.query);
    loginStore.getOdocExchangeLoginSetting();
    loginStore.getMultiLangs();
  }

  componentDidMount() {
    const { loginStore } = this.props;
    const { state = {} } = loginStore;
    const { cacheAccount: loginId, langId } = state;

    loginStore.getLoginForm({ loginId, langId });
    // this.onWindowResize();
  }

  componentDidUpdate() {
    const _this = this;
    jQuery('.e9-odoc-exchange-login-form-input').unbind().keydown(function (e) {
      e = e || window.event;
      const key = e.keyCode || e.which || e.charCode;
      if (key == 13) {
        const inputs = jQuery('.e9-odoc-exchange-login-form-input');
        const idx = inputs.index(this);
        const nxtIdx = idx + 1;
        const nxtInput = jQuery(`.e9-odoc-exchange-login-form-input:eq(${nxtIdx})`);
        if (nxtInput.length > 0) {
          nxtInput.focus();
        } else {
          _this.onLogin();
        }
      }
    });
    this.onWindowResize();
  }

  onWindowResize() {
    const width = jQuery(window).width();
    const height = jQuery(window).height();

    jQuery('.e9-odoc-exchange-login-form').css({
      marginLeft: (jQuery(window).width() - $('.e9-odoc-exchange-login-form').width()) / 2,
      marginTop: (jQuery(window).height() - $('.e9-odoc-exchange-login-form').height()) / 2,
    });

    if (width < 800) {
      jQuery('.e9-odoc-exchange-login').css({ overflowX: 'scroll' });
    } else {
      jQuery('.e9-odoc-exchange-login').css({ overflowX: 'hidden' });
    }

    if (height < 712) {
      jQuery('.e9-odoc-exchange-login').css({ overflowY: 'scroll' });
    } else {
      jQuery('.e9-odoc-exchange-login').css({ overflowY: 'hidden' });
    }

    // alert( jQuery(".e9-odoc-exchange-login-form").css("marginLeft"));
  }

  renderMutilLang() {
    const { loginStore } = this.props;
    const { multiLangs, state, setState } = loginStore;
    const { langId, langText, hasMultiLang, multiLangVisible } = state;
    // const color = this.props.color || loginForm.color;
    const color = '#C62900';

    if (!hasMultiLang) {
      return <div className="e9-odoc-exchange-login-form-multiLang" />;
    }
    let selectedClassName = '';
    let multiLangListComp = '';
    if (multiLangVisible) {
      selectedClassName = 'e9-odoc-exchange-login-form-multiLangText-selected';
      multiLangListComp = (
        <div className="e9-odoc-exchange-login-form-multiLangList" >
          <ul>
            {/*eslint-disable */}
            {
              multiLangs.map(item => (
                <li
                  className={item.id == langId ? 'e9-odoc-exchange-login-form-multiLangList-selected' : ''}
                  onClick={() => {
                    loginStore.getLoginForm({ langId: item.id });
                    loginStore.setState({ langId: item.id, langText: item.language, multiLangVisible: false });
                  }}
                >
                  {item.language}
                </li>
              ))
            }
            {/* eslint-enable */}
          </ul>
        </div>
      );
    }

    return (
      <div className="e9-odoc-exchange-login-form-multiLang">
        <span
          className={`e9-odoc-exchange-login-form-multiLangText ${selectedClassName}`}
          style={multiLangVisible ? {} : { color }}
          onClick={(e) => {
            e.preventDefault && e.preventDefault();
            e.stopPropagation && e.stopPropagation();
            setState({ multiLangVisible: !multiLangVisible });
          }}
        >
          <span>{langText}</span>
          <i className="odocicon-e9-odoc-exchange-login-arrow" />
        </span>
        {multiLangListComp}
      </div>
    );
  }

  renderRemember() {
    const { loginStore } = this.props;
    const { labelObj, state, onPasswordForget, onRememberChange } = loginStore;
    const {
      isRememberPW,
      isRememberAccount,
      isRememberPassword,
      langId,
    } = state;

    // const {loginForm = {}} = loginSettingInfo;
    // const {color, backgroundColor} = loginForm;
    const color = '#C62900';
    return (<div className="e9-odoc-exchange-login-form-remember" style={{ color }}>
      <div className="e9-odoc-exchange-login-form-remember-forget" title={labelObj.forgetPassword}>
        <span onClick={() => onPasswordForget(langId)}>{labelObj.forgetPassword}</span>
      </div>
      <div className={`e9-odoc-exchange-login-form-remember-content ${isRememberPW == '1' ? '' : 'e9-odoc-exchange-login-form-display-hidden'}`}>
        <div className={'e9-odoc-exchange-login-form-remember-account'} title={labelObj.rememberAccount}>
          <Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@kx5h74`} checked={isRememberAccount} onChange={e => onRememberChange('account', e.target.checked)}>{labelObj.rememberAccount}</Checkbox>
        </div>
        <div className={'e9-odoc-exchange-login-form-remember-password'} title={labelObj.rememberPassword}>
          <Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@io1sl4`} checked={isRememberPassword} onChange={e => onRememberChange('password', e.target.checked)}>{labelObj.rememberPassword}</Checkbox>
        </div>
      </div>
      <div className="e9-odoc-exchange-login-form-clear" />
    </div>);
  }

  renderLoginForm() {
    const { loginStore } = this.props;
    const { labelObj, labelObj2, state, setState, onValidateCodeChange } = loginStore;
    const {
      isLogging,
      cacheAccount,
      cachePassword,
      loginFormItems,
      validateCode,
    } = state;

    const color = '#C62900';

    return (
      <div className="e9-odoc-exchange-login"
        style={{ backgroundImage: "url('/images/ecology9/offical/login_gov.png')", backgroundRepeat: 'no-repeat', backgroundSize: '100% 100%' }}
        onClick={() => setState({ multiLangVisible: false })}
      >

        <div className="e9-odoc-exchange-login-form">
          <div className="e9-odoc-exchange-login-form-logo">
            <i className="icon-coms-official logo" />

          </div>
          <div><p className="e9-odoc-exchange-login-form-title">{labelObj2.odocExchangeTitle} </p></div>

          {
            this.renderMutilLang()
          }

          {
            loginFormItems.map((item, index) => {
              let defaultValue = '';
              if (item.atype == 'account') {
                defaultValue = cacheAccount;
              } else if (item.atype == 'password') {
                defaultValue = cachePassword;
              }

              let itemComp = (
                <div key={index} className="e9-odoc-exchange-login-form-item" >
                  <i className={`odocicon-e9-odoc-exchange-login-${item.atype == 'account' ? 'account' : 'password'}`} />
                  {/* eslint-disable */}
                  <label className={`e9-odoc-exchange-login-form-label ${defaultValue ? 'e9-odoc-exchange-login-form-display-hidden' : ''}`} onClick={this.onLabelClick} htmlFor={item.id} >{item.label}</label>
                  {/* eslint-enable */}
                  <input type={item.type} id={item.id} name={item.name} className="e9-odoc-exchange-login-form-input" defaultValue={defaultValue} onBlur={() => item.atype == 'account' && loginStore.getLoginForm()} onChange={this.onInputChange} />
                </div>
              );

              if (item.atype == 'validatecode') {
                itemComp = (
                  <div key={index} className="e9-odoc-exchange-login-form-item" style={{ color, borderBottom: 'none' }}>
                    {/* eslint-disable */}
                    <label className="e9-odoc-exchange-login-form-label e9-odoc-exchange-login-form-label-vc" onClick={this.onLabelClick} htmlFor={item.id} >{item.label}</label>
                    {/* eslint-enable */}
                    <input type={item.type} id={item.id} name={item.name} className="e9-odoc-exchange-login-form-input e9-odoc-exchange-login-form-input-vc" style={{ border: `1px solid ${color}` }} onChange={this.onInputChange} />
                    <div className="e9-odoc-exchange-login-form-vc-img">
                      {/*eslint-disable*/}
                      <img src={validateCode} alt="" onClick={onValidateCodeChange} />
                      {/* eslint-enable */}
                    </div>
                  </div>
                );
              }

              return itemComp;
            })
          }
          {
            this.renderRemember()
          }
          <div className="e9-odoc-exchange-login-form-submit">
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@nau2wf`} type="primary" loading={isLogging} id="submit" name="submit" className="e9-odoc-exchange-login-form-btn" onClick={this.onLogin}>
              {labelObj.login}
            </Button>
          </div>
        </div>
      </div>
    );
  }

  render() {
    const { loginStore } = this.props;
    const { updatestatus, state } = loginStore;
    const { id } = state;
    if (updatestatus != '0' || !id) {
      return (
        <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@b3xkaz`} {...this.state} >
          <div style={{ color: '#000' }}>
            {getLabel('388593', '当前版本太老，请更新版本！')}
          </div>
        </WeaAlertPage>
      );
    }
    if (!loginStore.haslisence) {
      return (
        <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@wvgly2`} {...this.state} >
          <div style={{ color: '#000' }}>
            {getLabel('514387', '你没有访问当前页面的权限！')}
          </div>
        </WeaAlertPage>
      );
    }
    return this.renderLoginForm();
  }

  onLogin() {
    const { loginStore } = this.props;
    loginStore.onLogin();
  }

  onLabelClick(e) {
    jQuery(e.target.parentNode).find('input').focus();
  }

  onInputChange(e) {
    if (e.target.value) {
      jQuery(e.target.parentNode).find('.e9-odoc-exchange-login-form-label').addClass('e9-odoc-exchange-login-form-display-hidden');
    } else {
      jQuery(e.target.parentNode).find('.e9-odoc-exchange-login-form-label').removeClass('e9-odoc-exchange-login-form-display-hidden');
    }
  }
}
